<template>
  <div class="indexBox">
    <!-- 标题 -->
    <x-header :left-options="{showBack: false,backText:''}" class="headerBox">首页</x-header>
    <img src="../assets/img/bg.png" alt ref="indexBg" class="bgImg" />
    <img src="../assets/img/title.png" alt class="logoImg" />
    <!-- 搜索 -->
    <div class="searchBox">
      <div class="searchInner flex">
        <x-icon type="ios-search-strong" size="22" class="searchIcon"></x-icon>
        <input
          type="text"
          class="searchInput"
          v-model="keyWord"
          placeholder="请输入姓名或认证编号"
          @keyup.enter="searchClick"
        />
        <div class="queryBtn" @click="searchClick">查一下</div>
      </div>
    </div>
    <!-- 查询记录 -->
    <div class="queryLog">
      <span class="default">查询记录：</span>
      <span v-for="(item,index) in logList" class="logTag">{{item}}</span>
      <router-link to="/" class="default">查看更多>></router-link>
    </div>
    <div class="filingBox">
      <img src="../assets/img/g1.png" alt class="bottomImg" />
      <div class="company">©2019 北京新动力科技有限公司 | 保留所有权利</div>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import { XHeader } from 'vux'
import TabBar from "../components/tabBar";
export default {
  components: {
    XHeader,
    TabBar
  },
  data() {
    return {
      keyWord: '',
      logList: ['罗小飞', 'Jake', '马可波罗', '减肥攻略', '演员的自我修养',],
    }
  },
  mounted() {
    this.getHeight()
  },
  methods: {
    searchClick() {
      if (this.keyWord !== '' && this.keyWord !== undefined && this.keyWord !== null) {
        if (this.logList.length <= 20) {
          this.logList.push(this.keyWord)
        }
        this.$http.get('url', {
          params: {
            seach: this.keyWord
          }
        }).then(res => {
          // 成功相应
        }).catch(
          // 失败相应
        )
      }
    },
    getHeight() {
      let deviceHeight = window.screen.height
      let bgHeight = deviceHeight - 44
      this.$nextTick(() => {
        this.$refs.indexBg.style.height = bgHeight + 'px'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.indexBox {
  position: relative;
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
    }
  }
  .bgImg {
    width: 100%;
  }
  .logoImg {
    position: absolute;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
  }
  // 搜索
  .searchBox {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    border-radius: 10px;
    overflow: hidden;
    .searchInner {
      background-color: #f5f5f5;
      // padding: 10px 20px;
      font-size: 30px;
      .searchIcon {
        fill: #6c6c6c;
        margin: 0 20px;
      }
      .searchInput {
        outline: none;
        border: none;
        background-color: #f5f5f5;
        flex-grow: 1;
        font-size: 30px;
      }
      .queryBtn {
        width: 150px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background-color: #2585eb;
      }
    }
  }
  // 查询记录
  .queryLog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    font-size: 30px;
    .default {
      display: inline-block;
      color: #fff;
    }
    .logTag {
      color: #61c3f9;
      margin: 0 10px;
    }
  }
  .filingBox {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
    .bottomImg {
      width: 60%;
      margin-bottom: 20px;
    }
    .company {
      color: #99c5f8;
      font-size: 28px;
    }
  }
}
</style>